<template>
    <!-- 合约委托详情 -->
    <div class="entrustDetail">
        <assets-head :title="$t('委托详情')" />
        <div class="contBackground h-20 w-full"></div>
        <div class="grey-line contBackground"></div>
        <div class="pl-30 pr-30 pt-58 pb-58">
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('操作') }}</div>
                <div class="text-green textColor"> {{ handleWord(detail.direction, detail.offset,
                    detail.price_type) }}&nbsp;{{ detail.name }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('状态') }}</div>
                <div class="textColor">{{ detail.state === 'created' ? $t('已完成') : $t('未成交') }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('委托金额') }}</div>
                <div class="textColor">{{ detail.amount_open }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('剩余金额') }}</div>
                <div class="textColor">{{ detail.amount }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('保证金') }}</div>
                <div class="textColor">{{ detail.deposit }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('手续费') }}</div>
                <div class="textColor">{{ detail.fee }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('订单类型') }}</div>
                <div class="textColor" v-if="detail.price_type === 'limit'">{{ $t('限价委托') }}</div>
                <div class="textColor" v-else>{{ $t('市价委托') }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ detail.price_type === 'limit' ? $t('限价') : $t('市价') }}</div>
                <div class="textColor">{{ detail.price }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('订单号') }}</div>
                <div class="textColor">{{ detail.order_no }}</div>
            </div>
            <div class="flex justify-between pb-44">
                <div class="text-grey">{{ $t('委托时间') }}</div>
                <div class="textColor">{{ detail.create_time }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { _orderDetail } from "@/service/trade.api";
import assetsHead from "@/components/assets-head";
import PerpetualEntrustList from "@/components/perpetual-entrust-list";
import PerpetualHistoryPosition from "@/components/perpetual-history-position";
export default {
    name: "entrustDetail",
    data() {
        return {
            detail: {}
        }
    },
    components: { assetsHead },
    methods: {
        handleWord(direction, offset, price_type) {
            let a = ''
            let b = ''
            if (price_type === 'limit') {
                a = this.$t('限价')
            } else {
                a = this.$t('市价')
            }
            if (direction === 'buy' && offset === 'open') {
                b = this.$t('开多')
            } else if (direction === 'sell' && offset === 'open') {
                b = this.$t('开空')
            } else if (direction === 'buy' && offset === 'close') {
                b = this.$t('平多')
            } else {
                b = this.$t('平空')
            }
            return b
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        fetchDetail(order_no) {
            _orderDetail(order_no).then(data => {
                this.detail = data
            })
        }
    },
    beforeRouteEnter(to, from, next) {
        const { query: { order_no } } = to
        next(vm => {
            vm.fetchDetail(order_no)
        })
    }
}
</script>

<style lang="scss" scoped>
.entrustDetail {
    width: 100%;
    box-sizing: border-box;
}

.grey-line {
    height: 15px;
}
</style>
